@charset "utf-8";
@import "reset";
@import "base";
@import "common";

header{
    padding: 0 vw(23);    
    height: vw(57);
    display: flex;
    justify-content: space-between;
    margin-top: vw(48);

    .logo{
        width: vw(123);
        height: vw(57);
        border: 1px solid $color;
        border-radius: vw(20);
        text-align: center;
        line-height: vw(57);

        span{
            font-size: vw(26);
            font-weight: bold;
        }
    }

    p{
        font-size: vw(26);
        line-height: vw(57);
    }

    .icon{

        .iconfont{
            font-size: vw(52);
            color: $color;
            line-height: vw(57);
        }
    }
}

.banner{
    margin-top: vw(25);
    padding: 0 vw(22);

    .imgs{
        width: vw(705);
    }

    .text{
        margin-top: vw(36);
        display: flex;
        justify-content: space-between;
        padding-right: vw(19);

        p{
            font-size: vw(72);
            line-height: vw(45);
            color: $color;
        }

        .shopping{
            width: vw(110);
            height: vw(60);
            background-color: $color;
            border-radius: vw(20);
            text-align: center;
            line-height: vw(60);
            font-size: vw(30);

            a{
                color: #fff;
            }
        }
    }
    
}

main{
    padding-left: vw(46);
    padding-right: vw(40);
    .title{
        display: flex;
        justify-content: space-between;

        .left{
            display: flex;
            line-height: vw(126);
            
            .iconfont{
                font-size: vw(38);
                color: $color;
                line-height: vw(120);
            }

            p{
                margin-left: vw(13);
                font-size: vw(30);


                a{
                    color: $color;
                }
            }
        }

        .right{
            line-height: vw(126);
        }
    }

    .list-box{
        height: vw(625);
        .list-top{
            height: vw(67);
            background-color: $color;
            display: flex;
            line-height: vw(67);
            justify-content: space-between;
            padding: 0 vw(10);

            p{
                font-size: vw(30);
                color: #fff;
            }

            .iconfont{
                font-size: vw(25);
                color: #fff;
            }
        }

        .list-main{
            overflow: auto;
            height: vw(520);

            .box{
                display: flex;
                margin-top: vw(10);
                // align-items: center;
                position: relative;

                .imges{
                    width: vw(177);
                    height: vw(177);
                }

                .text{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    margin-left: vw(24);

                    P{
                        font-size: vw(30);
                    }

                    .icon-list{
                        width: vw(250);
                        display: flex;
                        justify-content: space-between;
                        .iconfont{
                            width: vw(36);
                            font-size: vw(35);
                            color: $color;
    
                            span{
                                font-size: vw(26);
                                color: #929292;
                            }
                        }
                    }

                    span{
                        font-size: vw(24);
                        color: #929292;
                    }

                    a{
                        font-size: vw(20);
                        color: $color;
                    }

                }

                .list-right{
                    width: vw(110);
                    height: vw(60);
                    background-color: $color;
                    border-radius: vw(20);
                    text-align: center;
                    line-height: vw(60);
                    color: #fff;
                    // margin-left: vw(83);
                    // flex: 1;
                    position: absolute;
                    align-self: center;
                    
                    right: 0;
                    // margin-top: vw(67);

                    a{
                        color: #fff;
                    }
                }
            }
        }
    }
}